import React from 'react';
import { Button } from 'antd';
import styled from 'styled-components';

const Footer = styled.div`
  display: flex;
  padding: 8px 20px;
  gap: 8px;
  border-top: 1px solid #d9d9d9;

  > *:first-child {
    margin-left: auto;
  }
`;

export type CommandFormFooterProps = {
  showCancel?: boolean;
  showPreview?: boolean;
  showSubmit?: boolean;
  onClose?: VoidFunction;
  onPreview?: VoidFunction;
  onSubmit?: VoidFunction;
  cancelText?: string;
  previewText?: string;
  submitText?: string;
  isPreviewLoading?: boolean;
  isSubmitLoading?: boolean;
  isPreviewDisabled?: boolean;
  isSubmitDisabled?: boolean;
  disabled?: boolean;
};

export const FormFooter = ({
  showCancel = true, // 是否显示取消按钮
  showPreview = false, // 是否显示预览按钮
  showSubmit = true, // 是否展示确认按钮
  onClose, // 取消事件
  onPreview, // 预览事件
  onSubmit, // 确认事件
  cancelText = '取消',
  previewText = '预览',
  submitText = '确认',
  isPreviewLoading, // 预览按钮加载
  isSubmitLoading, // 确认按钮加载
  isPreviewDisabled, // 预览按钮置灰
  isSubmitDisabled, // 确认按钮置灰
  disabled,
}: CommandFormFooterProps) => {
  return (
    <Footer>
      {showPreview && (
        <Button
          onClick={onPreview}
          disabled={disabled || isPreviewDisabled}
          loading={isPreviewLoading}>
          {previewText}
        </Button>
      )}
      {showSubmit && (
        <Button
          type='primary'
          htmlType='submit'
          onClick={onSubmit}
          disabled={disabled || isSubmitDisabled}
          loading={isSubmitLoading}>
          {submitText}
        </Button>
      )}
      {showCancel && (
        <Button
          disabled={disabled}
          onClick={onClose}>
          {cancelText}
        </Button>
      )}
    </Footer>
  );
};
